/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-02-24 07:30:35
 * @LastEditTime: 2021-02-27 08:13:01
 * @LastEditors: Zhang Zhaoda
 */
import { FC, useEffect, useState, useCallback } from "react"
import { useDispatch, useSelector } from "react-redux"
import { bindActionCreators } from "redux"
import color from "./css/color.module.scss";
import { RouteComponentProps } from "react-router-dom"
//引入actions
import * as colorAction from "@/store/actions/color.actions";
//引入inter
import { Istate } from "@/store/reducers/color.reducer";
//引入组件
import ColorComponent from "./component/ColorComponent"

interface Iprops extends RouteComponentProps {
  history:any
}
interface colorReducerInter {
  colorReducer: Istate
}
let Color: FC<Iprops> = function (props) {
  let { colorData, colorKey } = useSelector(({ colorReducer }: colorReducerInter) => colorReducer)
  let dispatch = useDispatch()
  let { getColorData, changeColorKey } = bindActionCreators(colorAction, dispatch)
  //tab下标
  let [carIndex, setCarIndex] = useState(0);
  let {code,SerialID,CarID}=props.history.location.state;
  
  useEffect(() => {
    
    getColorData(SerialID)
    
  },[])

  //tab切换事件
  let changeIndex = useCallback((index) => {
    setCarIndex(index)
    changeColorKey(Object.keys(colorData)[index])
  }, [carIndex, colorKey])

  //跳转图片事件
  let jumpBack = (ColorId: string) => {
    //跳回图片页   
                  
    props.history.push({ pathname: '/img', state: { SerialID,ColorId,CarID,code} })
  }
  return <div 
      className="animate__animated animate__fadeInUpBig"
      id={color.color}>
    <ColorComponent 
    jumpBack={jumpBack} 
    changeIndex={changeIndex} 
    colorData={colorData}
    colorKey={colorKey}
    carIndex={carIndex}
    />
    
  </div>
}
export default Color